<html>
	<head>
		<title>Carnegie FS | Portfolio</title>
		#{include 'html_head.html'/}
		<script type="text/javascript">
			$(document).ready(function() {
				$("#buy_specific_dialog").dialog({
					width: 450,
					height: 350,
					modal: true,
					autoOpen: false
				});
				
				$("#buy_dialog").dialog({
					width: 450,
					height: 350,
					modal: true,
					autoOpen: false
				});
					
				$("#sell_dialog").dialog({
					width: 450,
					height: 350,
					modal: true,
					autoOpen: false
				});		

				$("#request_check_dialog").dialog({
					width: 450,
					height: 250,
					modal: true,
					autoOpen: false
				});
			});
			var buy_specific_dialog = function(symbol,price){
				$("#buy_specific_dialog").dialog('open');
				document.getElementById("fundSymbol1").value=symbol;
				document.getElementById("yesterdayPrice1").value=commafy(price);
				
			};
			var open_buy_dialog = function(){
				selectCheck();
				$("#buy_dialog").dialog('open');
			};			
			var open_sell_dialog = function(name,price,shares){
				$("#sell_dialog").dialog('open');
				document.getElementById("fundSymbol3").value=name;
				document.getElementById("yesterdayPrice3").value=commafy(price);
				document.getElementById("shares1").value=commafy(shares);
			};			
			var open_request_check_dialog = function(){
				$("#request_check_dialog").dialog('open');
			};
			
			function approxCaculate(amountId,priceId,approxId,errorId){
				var amount=document.getElementById(amountId).value;
				var price =document.getElementById(priceId).value;
				var error = document.getElementById(errorId);
				error.style.display='none';
				var result = true;
				if(isNaN(amount)||Number(amount)<=0){
					error.style.display='';
					error.value = "Error:the input amount is invalid!";
					result = false;
				}else{
					if(amountId=="sellShare1"){
						var shares = document.getElementById("shares1").value;
						if(Number(amount)>Number(shares)){
							error.style.display='';
							error.value = "Error: you cannot sell more than you have";
							result = false;
						}else	
							document.getElementById(approxId).value=commafy((amount*price).toFixed(2));
							document.getElementById(approxId+"_Data").value=(amount*price).toFixed(2);		
					}
					else if(amountId=="checkAmount"){
						var availableBalance = document.getElementById("availableBalance").value;
						if(Number(amount)>Number(availableBalance)){
							error.style.display='';
							error.value = "Error: the check you request is more than you availa balance";
							result = false;
						}
					}
					
					else{
						var availableBalance = document.getElementById("availableBalance").value;
						if(Number(amount)>Number(availableBalance)){
							error.style.display='';
							error.value = "Error: the value you buy is more than you availa balance";
							result = false;
						}else{
							if(price=="new fund")
								document.getElementById(approxId).value="";
							else
								document.getElementById(approxId).value=commafy((amount/price).toFixed(3));
								document.getElementById(approxId+"_Data").value=(amount/price).toFixed(3);		
						}	
					}					
				}
				return result;	
			}
			
			function check(amountId,priceId,approxId,errorId){
				var result=false;		
				if(approxCaculate(amountId,priceId,approxId,errorId)){
					if(confirm("Confirm this trade")){
						result=true;
					}
				}
				return result;
			}
			
			function checkRemain(amountId,errorId){
				var result=false;		
				if(remainCount(amountId,errorId)){
					if(confirm("Confirm this trade")){
						result=true;
					}
				}
				return result;
			}
			
			function selectCheck(){
				var fundPrice;
				fundPrice=document.getElementById("fundSelected").options[window.document.getElementById("fundSelected").selectedIndex].value;
				if(fundPrice==0){
					document.getElementById("yesterdayPrice2").value="new fund";
				}else{
					document.getElementById("yesterdayPrice2").value=commafy(fundPrice);
				}
				document.getElementById("fundSymbol2").value=document.getElementById("fundSelected").options[window.document.getElementById("fundSelected").selectedIndex].text;
			}
			
			function remainCount(amountId,errorId){
				var amount=document.getElementById(amountId).value;
				var error = document.getElementById(errorId);
				var availableBalance = document.getElementById("availableBalance").value;
				error.style.display='none';
				var result = true;
				if(isNaN(amount)||Number(amount)<=0){
					error.style.display='';
					error.value = "Error:the input amount is invalid!";
					result = false;
				}else{
					if(Number(amount)>Number(availableBalance)){
						error.style.display='';
						error.value = "Error: the check you request is more than your balance";
						result = false;
					}
				}
				return result;
			}
			
			function checknum_shares(obj)
				{ if(/^\d+\.?\d{0,3}$/.test(obj.value)){
				  obj.value = obj.value;
				  }else{
				obj.value = obj.value.substring(0,obj.value.length-1);
				}
			}
			
			function checknum_amount(obj)
				{ if(/^\d+\.?\d{0,2}$/.test(obj.value)){
				  obj.value = obj.value;
				  }else{
				obj.value = obj.value.substring(0,obj.value.length-1);
				}
			}
			
			function  commafy(num)
			{  
	           num  =  num+"";  
	           var  re=/(-?\d+)(\d{3})/  
	           while(re.test(num)){  
	                 num=num.replace(re,"$1,$2")  
	           }  
	           return  num;  
		    }  
			
		</script>
	</head>

	<body>
		<div id="container">
			<!-- Page Header -->
			#{include 'header.html'/}
	
			<!-- Content Area -->
			<div id="content">
				<div class="title">Your Portfolio</div>
				<table width="100%">
					<tr>
						<td class="profile_item_lbl">Account Holder</td>
						<td class="profile_item_value">${customer.firstname} ${customer.lastname}</td>
					</tr>
					<tr>
						<td class="profile_item_lbl">Available Balance</td>
						<td class="profile_item_value">USD ${availableBalance.format('#,###.00')}</td>
					</tr>
					<tr>
						<td class="profile_item_lbl">Ledger Balance</td>
						<td class="profile_item_value">USD ${customer.cash.format('#,###.00')}</td>
						<!--<input type="hidden" name="availableBalance" id="availableBalance" value="${customer.cash}"/>-->
						<input type="hidden" name="availableBalance" id="availableBalance" value="${availableBalance}"/>
					</tr>
				</table>
				
				<div class="clear"></div>
				
				<table>
				<tr>
						<th class="tbl_header">Fund</th>
						<th class="tbl_header">Shares</th>
						<th class="tbl_header">Yesterday's Price</th>
						<th class="tbl_header">Value</th>
						<th></th>
						<th></th>
					</tr>
				
				%{
   					 for(position in positionList) {
				}%
   					 <tr>
						<td class="tbl_row">${position.fund.symbol}</td>
						<td class="tbl_row">${position.shares.setScale(3,1).format('#,###.000')}</td>
						<td class="tbl_row">USD ${fundHoldMap.get(position.fund).format('#,###.00')}</td>
						<td class="tbl_row">USD ${(position.shares*fundHoldMap.get(position.fund)).setScale(2,2).format('#,###.00')}</td>
						<td><button class="button_green" onclick='buy_specific_dialog("${position.fund.symbol}","${fundHoldMap.get(position.fund)}")'>Buy</button></td>
						<td><button class="button_red" onclick='open_sell_dialog("${position.fund.symbol}","${fundHoldMap.get(position.fund)}","${availableSellSharesMap.get(position.fund).setScale(3,2)}")'>Sell</button></td>
					</tr>
			    %{
			        }
			    }%
				</table>
				
				<div class="clear"></div>			
			
				<p>Buying Pending List</p>
				<table>
					<tr>
							<th class="tbl_header">Fund</th>
							<th class="tbl_header">Amount</th>
							<th></th>
							<th></th>
						</tr>
					
					%{
						 for(transaction in buyList) {
					
					}%
						 <tr>
							<td class="tbl_row">${transaction.position.fund.symbol}</td>
							<td class="tbl_row">USD ${transaction.amount.format('#,###.00')}</td>
							</tr>
					%{
						}
					}%
													
					</table>
				
				<p>Selling Pending List</p>
				<table>
					<tr>
							<th class="tbl_header">Fund</th>
							<th class="tbl_header">Shares</th>
							<th></th>
							<th></th>
						</tr>
					
					%{
						 for(transaction in sellList) {
					
					}%
						 <tr>
							<td class="tbl_row">${transaction.position.fund.symbol}</td>
							<td class="tbl_row">${transaction.shares.setScale(3,2).format('#,###.000')}</td>
							</tr>
					%{
						}
					}%
													
					</table>
				
				<p>Check Pending List</p>
				<table>
					<tr>
							<th class="tbl_header">Action</th>
							<th class="tbl_header">Amount</th>
							<th></th>
							<th></th>
						</tr>
					
					%{
						 for(transaction in checkList) {
					}%
						 <tr>
							<td class="tbl_row">${transaction.transaction_type}</td>
							<td class="tbl_row">USD ${transaction.amount.format('#,###.00')}</td>
							</tr>
					%{
						}
					}%
												
				</table>
				
				<div class="clear"></div>
				
				<button class="button_black" onclick="open_buy_dialog()">Buy Shares</button>
				<button class="button_black" onclick="window.location.href='history'">View Transaction History</button>
				<button class="button_black" onclick="open_request_check_dialog()">Request Check</button>
				<button class="button_black" onclick="window.location.href='research'">Research</button>			
			
				<!-- Page Footer -->
				#{include 'footer.html'/}
			</div>
			
			<div id="buy_specific_dialog" title="Buy Shares">
				<form name="buy" id="buy1" method="post" action="buy" onsubmit='return check("amountBuy1","yesterdayPrice1","approxQuantity1","error1")'>
					<table width="100%">
						<input type="text" name="error" id="error1"  size="60" readonly="readonly" style="display:none;color:#FF0000"  class="border_zero right_aligned" />
						<tr>
							<td class="tbl_row" colspan="2">
								You are buying:
								<input name="fundSymbol" id="fundSymbol1" readonly="readonly" class="border_zero" />
							</td>
						</tr>
						<tr>
							<td class="tbl_header">Yesterday's Price</td>
							<td class="tbl_row right_aligned">USD <input name="yesterdayPrice" id="yesterdayPrice1" readonly="readonly"  class="border_zero right_aligned" size="10" />
							</td>
						</tr>
						<tr>
							<td class="tbl_header">$ Value To Buy</td>
							<td class="tbl_row right_aligned">USD <input type="text" name="amountBuy" id="amountBuy1" onkeyup="checknum_amount(this);" onblur='approxCaculate("amountBuy1","yesterdayPrice1","approxQuantity1","error1")' size="10" value="0" class="right_aligned" /> </td>
						</tr>
						<tr>
							<td class="tbl_header">Approx # of Shares</td>
							<td class="tbl_row right_aligned"><input type="text" name="approxQuantity" id="approxQuantity1" size="10" value="0" class="border_zero right_aligned" /></td>
							<input type="hidden" name="approxQuantity_Data" id="approxQuantity1_Data" size="10" value="0" class="border_zero right_aligned" />
						</tr>
						<tr>
							<td class="tbl_header">Available Balance</td>
							<td class="tbl_row right_aligned">USD ${availableBalance.format('#,###.00')}</td>
						</tr>
						<!--<tr>
							<td class="tbl_header">Remaining Balance</td>
							<td class="tbl_row right_aligned">USD ${customer.cash}</td>
						</tr>-->
						<input type="hidden" name="username" id="username" value="${customer.username}">
						
					</table>
					<div align="right"><button class="button_green">Buy</button></div>
				</form>
			</div>
			
			<div id="buy_dialog" title="Buy Shares">
				<form name="buy" id="buy2" method="post" action="buy" onsubmit='return check("amountBuy2","yesterdayPrice2","approxQuantity2","error2")'>
					<table width="100%">
						<input type="text" name="error" id="error2"   size="60" readonly="readonly" style="display:none;color:#FF0000"  class="border_zero right_aligned" />
						<tr>
							<td class="tbl_row" colspan="2">
								You are buying:
								<select name="fundSelected" id="fundSelected" onChange="javascript:selectCheck();">
									%{
   									 for(fund in fundList) {
									}%
									<option name="" value=${fundAllMap.get(fund)}>${fund.symbol}</option>
									%{
									  }
									}%
								</select>
								Select
							</td>
						</tr>
						<tr>
							<td class="tbl_header">Yesterday's Price</td>
							<td class="tbl_row right_aligned">USD <input type="text" name="yesterdayPrice" id="yesterdayPrice2" size="10"   readonly="readonly" class="border_zero right_aligned" /></td>
						</tr>
						<tr>
							<td class="tbl_header">$ Value To Buy</td>
							<td class="tbl_row right_aligned"><input type="text" name="amountBuy" id="amountBuy2" onkeyup="checknum_amount(this);" onblur='approxCaculate("amountBuy2","yesterdayPrice2","approxQuantity2","error2")' size="10" value="0" class="right_aligned" /> </td>
						</tr>
						<tr>
							<td class="tbl_header">Approx # of Shares</td>
							<td class="tbl_row right_aligned"><input type="text" name="approxQuantity" id="approxQuantity2" size="10"   readonly="readonly" class="border_zero right_aligned" /></td>
							<input type="hidden" name="approxQuantity_Data" id="approxQuantity2_Data" size="10"   readonly="readonly" class="border_zero right_aligned" />
						</tr>
						<tr>
							<td class="tbl_header">Available Balance</td>
							<td class="tbl_row right_aligned">USD ${availableBalance.format('#,###.00')}</td>
						</tr>
						<!--<tr>
							<td class="tbl_header">Remaining Balance</td>
							<td class="tbl_row right_aligned">USD ${customer.cash}</td>
						</tr>-->
						<input type="hidden" name="fundSymbol" id="fundSymbol2"/>
						<input type="hidden" name="username" id="username2" value="${customer.username}">
					</table>
					<div align="right"><button class="button_green">Buy</button></div>
				</form>
			</div>					
			
			<div id="sell_dialog" title="Sell Shares">
				<form name="sell" id="sell1" method="post" action='sell' onsubmit='return check("sellShare1","yesterdayPrice3","approxQuantity3","error3")'>
					<table width="100%">
						<input type="text" name="error" id="error3"   size="60" readonly="readonly" style="display:none;color:#FF0000"  class="border_zero right_aligned"  />
						<tr>
							<td class="tbl_row" colspan="2">You are selling: <b>
							<input name="fundSymbol" id="fundSymbol3"    readonly="readonly" class="border_zero" />
							</b></td>
						</tr>
						<tr>
							<td class="tbl_header">Yesterday's Price</td>
							<td class="tbl_row right_aligned">USD 
							<input name="yesterdayPrice" id="yesterdayPrice3" size="10"   readonly="readonly" class="border_zero right_aligned" /></td>
						</tr>
						<tr>
							<td class="tbl_header">Quantity To Sell</td>
							<td class="tbl_row right_aligned"><input type="text" name="sellShare" id="sellShare1" onkeyup="checknum_shares(this);" onblur='approxCaculate("sellShare1","yesterdayPrice3","approxQuantity3","error3")' size="10" value="0" class="right_aligned" /> shares</td>
						</tr>
						<tr>
							<td class="tbl_header">Estimated Returns</td>
							<td class="tbl_row right_aligned">USD <input type="text" name="approxQuantity" id="approxQuantity3" size="10" value="0.00" readonly="readonly" class="border_zero right_aligned" /></td>
							<input type="hidden" name="approxQuantity_Data" id="approxQuantity3_Data" size="10" value="0.00" readonly="readonly" class="border_zero right_aligned" />
						</tr>
						<tr>
							<td class="tbl_header">Current Shares</td>
							<td class="tbl_row right_aligned"><input type="text" name="shares" id="shares1" size="10" value="0.00" readonly="readonly" class="border_zero right_aligned" /></td>
						</tr>
						<!--<tr>
							<td class="tbl_header">Remaining Balance</td>
							<td class="tbl_row right_aligned">USD ${customer.cash}</td>
						</tr>-->
						<input type="hidden" name="username" id="username3" value="${customer.username}">
					</table>
					<div align="right"><button class="button_red">Sell</button></div>
				</form>
			</div>

			<div id="request_check_dialog" title="Request Check">
				<form name="request_check" method="post" action="check" onsubmit='return checkRemain("checkAmount","error4")'>
					<table width="100%">
						<input type="text" name="error" id="error4"   size="60" readonly="readonly" style="display:none;color:#FF0000"  class="border_zero right_aligned"/>
						<tr>
							<td class="tbl_header">Available Balance</td>
							<td class="tbl_row right_aligned">USD ${availableBalance.format('#,###.00')}</td>
						</tr>
						<tr>
							<td class="tbl_header">Request Amount</td>
							<td class="tbl_row right_aligned">USD <input type="text" name="checkAmount" id="checkAmount" size="10" value="" onkeyup="checknum_amount(this);" onblur='remainCount("checkAmount","error4")' class="right_aligned" /></td>
						</tr>
						<!--<tr>
							<td class="tbl_header">Remaining Balance</td>
							<td class="tbl_row right_aligned">USD <input name="remainBalance" id="remainBalance" value="${customer.cash}"   readonly="readonly" class="border_zero right_aligned" size="10" /></td>
						</tr>-->
						<input type="hidden" name="username" id="username4" value="${customer.username}">
					</table>
					<div align="right"><button class="button_black">Request Check</button></div>
				</form>
			</div>			
		</div>
	</body>

</html>